/* Polaris no longer uses different button styling depending on the context,
   so we can override all buttons at once. */
html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
  &:not(.Polaris-Button--plain) {
    &:hover {
      box-shadow: var(--pc-button-shadow-hover);
      border: none;
    }
  }

  /* IconOnly */
  &.Polaris-Button--iconOnly {
    padding: var(--p-space-150) var(--p-space-100);
  }

  /* Dimsiss buttons */
  &.Polaris-Button--plain.Polaris-Button--iconOnly {
    padding: var(--p-space-100);

    &:hover {
      background: rgba(0, 0, 0, 0.05) !important;
      box-shadow: none !important;
    }

    svg {
      fill: var(--p-color-icon);
    }
  }

  /* Plain */
  &.Polaris-Button--plain {
    box-shadow: none !important;
  }

  /* Tertiary */
  &.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
    &>.Polaris-Button__Content {
      font-size: var(--p-font-size-300);
      font-weight: var(--p-font-weight-medium) !important;
    }

    &:hover {
      background: var(--p-color-bg-fill-tertiary);
    }
  }

  /* Loading */
  &.Polaris-Button--loading {
    svg {
      fill: var(--p-color-icon-disabled);
    }
  }

  /* Destructive */
  &.Polaris-Button--destructive {
    --pc-button-color: var(--p-color-bg-fill-critical);
    --pc-button-text: var(--p-color-bg-surface);
    --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
    --pc-button-color-active: var(--p-color-bg-fill-critical-active);
    --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
    box-shadow: var(--p-shadow-button-primary-critical);
  }

  /* Primary */
  &.Polaris-Button--primary {
    --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
    --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
    --pc-button-text: var(--p-color-bg-surface);
    --pc-button-color-hover: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
    --pc-button-color-active: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
    --pc-button-color-depressed: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-selected);

    &:hover {
      --pc-button-text: var(--p-color-bg-surface);
    }
    &:active {
      box-shadow: var(--pc-button-box-shadow_active);
    }
  }
}

@media (max-width: 767px) {

  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain),
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
    &>.Polaris-Button__Content {
      font-size: var(--p-font-size-350) !important;
      line-height: var(--p-font-line-height-500) !important;
    }
  }

  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain):not(.Polaris-Button--disclosure.Polaris-Button--plain),
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
    &>.Polaris-Button__Content {
      font-weight: var(--p-font-weight-semibold) !important;
    }
  }
}
